<template>
  <div>
    <el-button type="primary" @click="handleAdd">添加新闻</el-button>
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column label="新闻标题" width="180px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
       <el-table-column label="新闻类型" width="180px">
        <template slot-scope="scope">
          <span size="medium">{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="新闻内容" width="700px" show-overflow-tooltip>
        <template slot-scope="scope">
          <span size="medium">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
     
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- Form -->

    <el-dialog title="新闻内容" width="80%" :visible.sync="dialogFormVisible.visible">
      <el-form :model="form">
        <el-form-item label="新闻标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新闻类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择新闻类型">
            <el-option label="教学工作" value="教学工作"></el-option>
            <el-option label="科研工作" value="科研工作"></el-option>
            <el-option label="中心动态" value="中心动态"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新闻内容" :label-width="formLabelWidth">
          <div style="border: 1px solid #ccc;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden;"
              v-model="form.content"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible.visible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { getArticle, addArticle, delArticle, editArticle } from "@/api/article/index";
import { ToText } from '@/utils/utils';
export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      tableData: [],
      dialogFormVisible: { type: 'add' ,visible:false},
      form: {
        title: "",
        type: "",
        content: "",
      },
      formLabelWidth: "120px",
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.form=JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = { type: 'edit' ,visible:true};
    },
    handleDelete(index, row) {
      delArticle({id: row.id}).then((response) => {
        getArticle()
        .then((response) => {
          this.tableData = response.data;
          // this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
        })
      });
    },
    handleAdd() {
      this.dialogFormVisible = { type: 'add' ,visible:true};
       this.form= {
        title: "",
        type: "",
        content: "",
      };
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onSubmit() {
      this.form.content=this.editor.getHtml();
      if (this.dialogFormVisible.type === 'add') {
         addArticle(this.form).then((response) => {
         getArticle()
        .then((response) => {
          this.tableData = response.data;
          // this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
        })
      });
      }else{
         editArticle(this.form).then((response) => {
         getArticle()
        .then((response) => {
          this.tableData = response.data;
          // this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
        })
      });
      }
     this.dialogFormVisible = { type: 'add' ,visible:false};
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    getArticle()
      .then((response) => {
        this.tableData = response.data;
      })
      .catch((error) => {
        console.log(error.data);
      });
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>

<style lang="scss" scoped>
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
